<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" charset="UTF-8" />
    <title>优化节点添加</title> 
</head> 
<body>
    <button id="btn">
        Add
    </button>
<script type="text/javascript">
    for(var i = 0;i < 10;i++){
        var oP = document.createElement('p')
        oP.innerHTML = i
        document.body.appendChild(oP)
    }
//第二种优化的方式创建节点
    const fragEle = document.createDocumentFragment()//定义一个文档碎片的容器
    for(var i = 0;i < 10;i++){
        var oP = document.createElement('p')
        oP.innerHTML = i
        fragEle.body.appendChild(oP)
    }

    document.body.appendChild(fragEle)
</script> 
</body> 
</html>